<template>
    <div class="box">
        <div class="header">
            <img @click="router.back()" src="@/assets/img/ConfirmOrder/icon_close_circle_gray1.png" alt="">
            有品收银台
        </div>
        <div class="container">
            <p><span>￥</span>{{ total }}<span>.00</span></p>
            <p>剩余支付时间:永远~</p>
        </div>
        <div class="footer">
            <button @click="payHandler">确认支付￥{{ total }}</button>
        </div>
    </div>
</template>

<script setup lang="ts">

import { onMounted, ref } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import { OrderApi } from '@/api';
import { useOrder } from '@/store';



const Order = useOrder()
const route = useRoute()
const router = useRouter()
const total = ref<number>()

onMounted(async() => {
    total.value = await OrderApi.getOrder((route.params.id) as string)
    Order.isInit = false
})

const payHandler = async()=>{
    await OrderApi.pay((route.params.id) as string)
    await Order.update()
    router.replace({name:"Order"})
}

</script>
<style scoped lang="stylus">
.box
    width 100%
    height 100%
    display flex
    flex-direction column
    background-color rgb(244,244,244)

.header
    height 44px
    display flex
    justify-content center
    align-items center
    position relative

.header img
    width 39px
    height 48px
    position absolute
    top 0
    left 11px

.container
    flex-grow 1
    display flex
    flex-direction column
    margin-top 7px
    align-items center

.container p:first-child
    color: rgb(248, 36, 0);
    font-size 28px
.container span
    font-size 14px

.container p:last-child
    background-color: rgb(255, 255, 255);
    height: 20px;
    margin-top: 5px;
    padding-right: 12px;
    padding-left: 12px;
    border-radius: 100px;
    color: rgb(248, 36, 0);
    font-size: 12px;


.footer
    display flex
    justify-content center
    align-items center
    padding 8px 0

.footer button
    background: linear-gradient(to right, rgb(255, 106, 0), rgb(248, 36, 0));
    width: 345px;
    height: 38px
    border 0
    color: rgb(255, 255, 255);
    font-size: 15px;
    font-weight: 500;
    border-radius: 20px;
</style>